<template>
  <div class="header-actions" :class="flexCenter">
    <YuButton margin="4px 4px 0 0" v-if="isSubscription && store.token"
              @click="getSubOrCancel(actionsData, actionsData?.subed)">
      <div class="flex items-center">
        <span class="i-ic-baseline-star-border text-xl"
              :class="(actionsData?.subed || isSub) ? 'yu-textColor-active' : ''"></span>
        <span>{{ (actionsData?.subed || isSub) ? '已订阅' : '订阅' }}</span>
        <span v-if="actionsData?.subCount > 0">({{ actionsData?.subCount }})</span>
      </div>
    </YuButton>
    <YuButton type="primary" margin="4px 4px 0 0" @click="player(actionsData?.id)" v-if="isAllPlay">
            <span :class="[flexCenter]">
              <span :class="[flexCenter]">
                <span class="inline-block text-xl i-mdi-play-circle-outline"/>
                <span :class="m_r_l">播放 <span
                    v-if="actionsData?.duration">{{ timestampToSecondsMinutes(actionsData?.duration) }}</span></span>
              </span>
            </span>
    </YuButton>
    <YuButton padding="10px" margin="4px 4px 0 0" @click="pushPlayerList(actionsData?.id)" v-if="isAddPlaylist">
      <div :class="flexCenter">
        <span class="inline-block i-mdi-gamepad-round"/>
        <span class="ml-1">加入播放列表</span>
      </div>
    </YuButton>
    <!-- 收藏 -->
    <YuButton margin="4px 4px 0 0" padding="10px" v-if="store.token && isCollect"
              @click="addMyPlaylist(actionsData?.id)">
      <div :class="flexCenter">
        <span class="inline-block i-mdi-folder-multiple-plus"/>
        <span class="ml-1">添加到收藏</span>
        <span v-if="actionsData?.subCount">({{ actionsData?.subCount }})</span>
      </div>
    </YuButton>
    <YuButton margin="4px 4px 0 0" v-if="store.token && isAddMusicList" color="#ff9292"
              :disabled="actionsData?.subscribed || store.collect.includes(actionsData?.id) "
              @click="collectPlaylist(actionsData?.id)">
            <span :class="[flexCenter]">
              <span class="inline-block i-mdi-folder-plus mr-2"/>
              <span>订阅歌单</span>
              <span v-if="actionsData?.subscribedCount">({{ rotate(actionsData?.subscribedCount) }})</span>
            </span>
    </YuButton>
    <YuButton margin="4px 4px 0 0" v-if="store.token && isShare" @click="sharePopupA()">
            <span :class="[flexCenter]">
              <span class="inline-block i-mdi-share mr-2"/>
              <span v-if="actionsData?.shareCount">({{ rotate(actionsData?.shareCount) }})</span>
            </span>
    </YuButton>
    <YuButton margin="4px 0 0 4px" v-if="(store.currentInfo.type === 0 || store.currentInfo.type === 6) && isDownload"
              @click="downloadUrl">
            <span :class="[flexCenter]">
              <span class="i-mdi-download inline-block mr-2"/>
              <span>下载</span>
            </span>
    </YuButton>
    <YuButton margin="4px 0 0 4px" @click="scrollReview" v-if="isReview">
             <span :class="[flexCenter]">
              <span class="inline-block i-mdi-message-bulleted mr-2"/>
              <span v-if="actionsData?.commentCount">({{ rotate(actionsData?.commentCount) }})</span>
            </span>
    </YuButton>
    <YuButton margin="4px 0 0 4px" @click="radioProgramLike(actionsData?.id, actionsData?.liked)" v-if="isLike">
             <span :class="[flexCenter]">
              <span class="inline-block i-ic-baseline-tag-faces mr-2 text-xl"
                    :class="(actionsData?.liked || liked) ? 'yu-textColor-active' : ''"/>
              <span v-if="actionsData?.likedCount">({{ rotate(actionsData?.likedCount) }})</span>
            </span>
    </YuButton>
    <!-- 分享弹窗 -->
    <share-popup ref="sharepopupExamples" :sharePlayerInfo="shareParams"/>
    <!-- 添加音乐到我的歌单 -->
    <add-playlist/>
  </div>
</template>

<script setup>
import YuButton from '@/components/YuButton/index.vue'
import rotate from '@/hooks/filter'
import {reactive, toRefs, ref} from "vue";
import {timestampToSecondsMinutes} from "@/utils/index"
import {useStore} from "@/store/index"
import {asString} from "@/utils/index";
import {useRoute} from "vue-router";
import {getMvSub, getPlaylistTrackAdd} from "../../api/mv/index.js";
import {Toast} from "vant";

const route = useRoute()
// 分享弹窗实例
const sharepopupExamples = ref(null)
const store = useStore()

const styleActions = reactive({
  flexCenter: 'flex items-center flex-wrap',
  m_r_l: 'mr-2 ml-2',
  shareParams: {}, // 分享参数用来判断分享的类型
  isSub: false, // 是否订阅成功
  liked: false // 是否点赞
})

const {flexCenter, shareParams, m_r_l, isSub, liked} = toRefs(styleActions)
const props = defineProps({
  actionsData: Object, // 接收的是参数操作需要的数据id等
  songs: Array, // 用于添加到歌单使用id
  radioMusic: Object, // 电台节目
  // 是否展示播放全部
  isAllPlay: {
    type: Boolean,
    default: true
  },
  // 是否展示添加到播放列表
  isAddPlaylist: {
    type: Boolean,
    default: true
  },
  // 是否展示收藏按钮
  isCollect: {
    type: Boolean,
    default: true
  },
  // 是否添加到我歌单
  isAddMusicList: {
    type: Boolean,
    default: true
  },
  // 是否显示分享按钮
  isShare: {
    type: Boolean,
    default: true
  },
  // 是否显示下载按钮
  isDownload: {
    type: Boolean,
    default: true
  },
  // 是否展示评论按钮
  isReview: {
    type: Boolean,
    default: true
  },
  // 是否展示订阅
  isSubscription: {
    type: Boolean,
    default: false
  },
  // 是否点赞
  isLike: {
    type: Boolean,
    default: false
  },
  // 喜欢的type
  isLikeType: {
    type: Number,
    default: 4
  }
})

// 播放歌单
const player = (id) => {
  const {type} = store.currentInfo
  const currentType = {
    0: () => {
      // 设置歌曲的type
      store.getSongDetail(id)
    },
    1: () => {
      // 设置歌单的type
      // 第二个参数是来判断是否是追加歌单
      store.getPlaylistDetail(id)
    },
    2: () => {
      // 设置专辑的type
      // 第二个参数是来判断是否是追加歌单
      store.getAlbumPlayer(id)
    },
    // 播放每日歌曲
    3: () => {
      store.getRecommendSongs()
    },
    // 播放歌手50首歌
    4: () => {
      store.playArtistTopSong(route.query.id)
    },
    // 播放电台
    5: () => {
      store.getDjProgramPlayer({rid: route.query.id, limit: props.actionsData.programCount})
    },
    // 播放电台节目
    6: () => {
      store.getProgramDetailPlay(route.query.id)
    }
  }
  currentType && currentType[type] && currentType[type]()
}
// 追加歌单
const pushPlayerList = (id) => {
  const {type} = store.currentInfo
  const currentType = {
    0: () => {
      // 设置歌曲的type
      store.getSongDetail(id, true)
    },
    1: () => {
      // 设置歌单的type
      // 第二个参数是来判断是否是追加歌单
      store.getPlaylistDetail(id, true)
    },
    2: () => {
      // 设置专辑的type
      // 第二个参数是来判断是否是追加歌单
      store.getAlbumPlayer(id, true)
    },
    // 追加到播放列表每日歌曲
    3: () => {
      store.getRecommendSongs(true)
    },
    // 追加歌手50首歌
    4: () => {
      store.playArtistTopSong(route.query.id, true)
    }
  }
  currentType && currentType[type] && currentType[type]()
}

// 订阅歌单
const collectPlaylist = (id) => {
  // 订阅歌单
  store.getPlaylistSubscribe(id)
}

// 分享弹窗
const sharePopupA = () => {
  styleActions.shareParams = {
    type: '歌单',
    name: props.actionsData?.name ?? props?.actionsData?.title,
    publicId: props.actionsData?.id ?? props?.actionsData?.vid
  }
  const {type} = store.currentInfo
  const currentType = {
    // 歌曲
    0: () => {
      styleActions.shareParams.type = '歌曲'
      styleActions.shareParams.shareType = 'song'
    },
    // 歌单
    1: () => {
      styleActions.shareParams.type = '歌单'
      styleActions.shareParams.shareType = 'playlist'
    },
    // 专辑
    2: () => {
      styleActions.shareParams.type = '专辑'
      styleActions.shareParams.shareType = 'album'
    },
    // 电台
    5: () => {
      styleActions.shareParams.type = '电台'
      styleActions.shareParams.shareType = 'djradio'
    },
    10: () => {
      styleActions.shareParams.type = 'MV'
      styleActions.shareParams.shareType = 'mv'
    },
    11: () => {
      styleActions.shareParams.type = '视频'
      styleActions.shareParams.shareType = 'video'
    }
  }
  currentType && currentType[type] && currentType[type]()
  // 打开分享弹窗
  sharepopupExamples.value.yuPopupA()
}
// 点击按钮滚动到评论位置
const scrollReview = () => {
  document.querySelector('#comment').scrollIntoView({block: 'start', behavior: 'smooth'})
}
// 下载音乐只有在歌曲详情的时候才可以下载
const downloadUrl = () => {
  const {actionsData} = props
  let singerName = ''
  // 可能有很多歌歌手所以需要遍历通过_拼接
  actionsData.ar_al.ar.forEach(item => {
    singerName += item.name + '_'
  })
  // 删除最有一个拼接符
  singerName = singerName.substring(0, singerName.length - 1)
  const params = {id: actionsData?.id, musicName: actionsData?.name, singerName}
  store.getSongDownloadUrl(params)
}

// 收藏到我的歌单
const addMyPlaylist = (id) => {
  if (store.currentInfo.type !== 10) {
    store.addPlaylistPopup = true
    const {type} = store.currentInfo
    const currentType = {
      // 歌曲
      0: () => {
        // 存放添加歌曲的id
        store.musicId = id.toString()
      },
      // 收藏每日歌曲
      3: () => {
        store.musicId = asString(props.songs)
      },
      // 专辑
      2: () => {
        store.musicId = asString(props.songs)
      },
      // 收藏歌手50首歌曲
      4: () => {
        store.musicId = asString(props.songs)
      }
    }
    currentType && currentType[type] && currentType[type]()

  } else {
    store.currentInfo.type === 10 ? getMvSub({ mvid: route.query.id,t: 1}).then(res => {
      if(res.code === 200) Toast('收藏成功')
    }) : Toast('无法使用')
  }
}


// 电台详情订阅或者取消订阅电台
const getSubOrCancel = (info, t) => {
  let rid = info?.id
  if (store.currentInfo.type === 6)
    rid = info?.radio?.id
  const s = t ? 0 : 1
  console.log(rid, s)
  store.getDjSub(rid, s).then(code => {
    styleActions.isSub = !t
  })
}

// type:资源类型,对应以下类型 1: mv 4: 电台 5: 视频 6: 动态
// t: 操作,1 为点赞,其他为取消点赞
// id: 资源 id
// 如给动态点赞，不需要传入 id，需要传入 threadId
// 电台节目点赞
const radioProgramLike = async (id, liked) => {
  let t = liked ? 0 : 1;
  const code = await store.getResourceLike({id: id ? id : store.currentInfo.id, t, type: props.isLikeType})
  if (code === 200) styleActions.liked = Boolean(t)
}

</script>

<style scoped>

</style>
